<template>
  <div>
    <head-top></head-top>
    <section class="data_section">
      <header class="section_title">数据统计</header>
      <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="4">
          <div class="data_list today_head">
            <span class="data_num head">本周数据：</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="data_list">
            <span class="data_num">{{userCount}}</span> 新增用户
          </div>
        </el-col>
        <el-col :span="8">
          <div class="data_list">
            <span class="data_num">{{orderCount}}</span> 新增订单
          </div>
        </el-col>
        <!-- <el-col :span="4"><div class="data_list"><span class="data_num">{{adminCount}}</span> 新增管理员</div></el-col> -->
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="data_list all_head">
            <span class="data_num head">总数据：</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="data_list">
            <span class="data_num">{{allUserCount}}</span> 注册用户
          </div>
        </el-col>
        <el-col :span="8">
          <div class="data_list">
            <span class="data_num">{{allOrderCount}}</span> 订单
          </div>
        </el-col>
        <!-- <el-col :span="4"><div class="data_list"><span class="data_num">{{allAdminCount}}</span> 管理员</div></el-col> -->
      </el-row>
    </section>
    <tendency :sevenDate="sevenDate" :sevenDay="sevenDay"></tendency>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import tendency from "../components/tendency";
import dtime from "time-formater";
import {
  userCount,
  orderCount,
  getUserCount,
  getOrderCount,
  orderWeek,
  userWeek
} from "@/api/getData";
export default {
  data() {
    return {
      userCount: null,
      orderCount: null,
      adminCount: null,
      allUserCount: null,
      allOrderCount: null,
      allAdminCount: null,
      sevenDay: [],
      orderWeek: [],
      userWeek: [],
      sevenDate: [[], [], []]
    };
  },
  components: {
    headTop,
    tendency
  },
  mounted() {
    for (let i = 6; i > -1; i--) {
      const date = dtime(new Date().getTime() - 86400000 * i).format(
        "YYYY-MM-DD"
      );
      this.sevenDay.push(date);
      //console.log(this.sevenDay)
    }
    this.initData(res => {
      this.getSevenData();
    });
  },
  computed: {},
  methods: {
    async initData(callback) {
      const today = dtime().format("YYYY-MM-DD");
      //, orderCount(today), adminDayCount(today), getUserCount(), getOrderCount(), adminCount()
      Promise.all([userCount(), orderCount(), orderWeek(), userWeek()])
        .then(res => {
          //console.log(res)
          this.orderWeek = res[2].data;
          this.userWeek = res[3].data;
          this.userCount = res[0].data.weekCount;
          this.allUserCount = res[0].data.allCount;
          this.orderCount = res[1].data.weekCount;
          // this.adminCount = res[2].count;

          this.allOrderCount = res[1].data.allCount;
          // this.allAdminCount = res[5].count;
          callback(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    async getSevenData() {
      var index = ["one", "two", "three", "four", "five", "six", "seven"];
      const apiArr = [[], []];
      for (let i = 0; i < 7; i++) {
        apiArr[0].push(this.userWeek[index[i]]);
        apiArr[1].push(this.orderWeek[index[i]]);
      }
      console.log(this.userWeek);
      //console.log(111111111111)
      //console.log(this.userWeek["one"])
      this.sevenDate = apiArr;
      // this.sevenDay.forEach((item,index) => {
      // 	//console.log(userWeek(index))
      // 	apiArr[0].push(userWeek(index))
      // 	apiArr[1].push(orderWeek(index))
      // })

      // const promiseArr = [...apiArr[0], ...apiArr[1]]
      // Promise.all(promiseArr).then(res => {
      // 	const resArr = [[],[]];
      // 	res.forEach((item, index) => {
      // 		if (item.status == 1) {
      // 			resArr[Math.floor(index/7)].push(item.count)
      // 		}
      // 	})
      // 	this.sevenDate = [[0,1,2,3,4,5,6],[0,1,2,3,4,5,6]];
      // }).catch(err => {
      // 	console.log(err)
      // })
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.data_section {
  padding: 20px;
  margin-bottom: 40px;
  .section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .data_list {
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 6px;
    background: #e5e9f2;
    .data_num {
      color: #333;
      font-size: 26px;
    }
    .head {
      border-radius: 6px;
      font-size: 22px;
      padding: 4px 0;
      color: #fff;
      display: inline-block;
    }
  }
  .today_head {
    background: #ff9800;
  }
  .all_head {
    background: #20a0ff;
  }
}
.wan {
  .sc(16px, #333);
}
</style>
